<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>亚启配置页面</title>
    <script src="/js/vue.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div style="margin-left: 200px;margin-top: 50px">

        <el-form :model="form" :inline="true" :rules="rules" ref="form" size="small" label-width="150px">

            <el-form-item label="ClientId" prop="clientId">
                <el-input
                        inline
                        placeholder="请输入客户端id"
                        v-model="form.clientId"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="控制器厂商">
                <el-select v-model="form.manufacturer" placeholder="控制器厂商" style="width: 300px;">
                    <el-option label="KEBA" value="KEBA"></el-option>
                    <el-option label="ARCUCHI" value="ARCUCHI"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="控制器列表">
                <el-select v-model="form.ipList" placeholder="控制器列表" style="width: 170px;">
                    <el-option
                            v-for="item in ipList"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <el-button type="success" @click="test">扫描</el-button>
                <el-button type="success" @click="test">添加</el-button>
            </el-form-item>
            <el-form-item label="获取网关ID接口" prop="webApi">
                <el-input
                        inline
                        placeholder="请输入WebAPI"
                        v-model="form.webApi"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="网关编号" prop="gid">
                <el-input
                        inline
                        placeholder="请输入网关编号"
                        v-model="form.gid"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="采集器编号" prop="cid">
                <el-input
                        placeholder="请输入采集器编号"
                        v-model="form.gid"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="MQTT域名" prop="mqttDomain">
                <el-input
                        inline
                        placeholder="请输入MQTT域名"
                        v-model="form.mqttDomain"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="MQTT端口" prop="mqttPort">
                <el-input
                        inline
                        placeholder="请输入MQTT端口"
                        v-model="form.mqttPort"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="MQTT连接超时时间" prop="timeout">
                <el-input
                        placeholder="MQTT连接超时时间"
                        v-model="form.timeout"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="MQTT心跳时间" prop="keepAlive">
                <el-input
                        placeholder="MQTT心跳时间"
                        v-model="form.keepAlive"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="发布主题" prop="pubTopic">
                <el-input
                        inline
                        placeholder="请输入发布主题"
                        v-model="form.pubTopic"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="命令订阅主题" prop="commandSubTopic">
                <el-input
                        inline
                        placeholder="请输入命令订阅主题"
                        v-model="form.commandSubTopic"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="命令结果返回主题" prop="subResultTopic">
                <el-input
                        inline
                        placeholder="请输入命令结果返回主题"
                        v-model="form.subResultTopic"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="MQTT用户名" prop="mqttUsername">
                <el-input
                        inline
                        placeholder="请输入MQTT用户名"
                        v-model="form.mqttUsername"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="MQTT密码" prop="mqttPassword">
                <el-input
                        inline
                        placeholder="请输MQTT密码"
                        v-model="form.mqttPassword"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>

            <el-form-item label="后台地址" prop="host" disabled>
                <el-input
                        disabled
                        placeholder="请输后台服务器地址"
                        v-model="form.host"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>

            <el-form-item label="opc服务器ip" prop="ip">
                <el-input
                        placeholder="请输opcServer服务器ip地址"
                        v-model="form.ip"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>

            <el-form-item label="opc服务器端口" prop="port">
                <el-input
                        placeholder="请输opcServer服务器端口"
                        v-model="form.port"
                        clearable
                        style="width: 300px;">
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" plain @click="submit">保存配置</el-button>
                <el-button type="primary" plain @click="scanSubmit">扫描采集</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>

        </el-form>


    </div>


</div>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            baseURI: '',
            timeout: 10000,
            form: {
                host: '',
                ip: '',
                port: '',
                ipList: []
            },
            ipList:['192.168.1.1','192.168.1.1','192.168.1.1','192.168.1.1','192.168.1.1'],
            rules: {
                host: [{required: true, message: '后台主机地址不能为空', trigger: 'blur'}],
                ip: [{required: true, message: 'ip不能为空', trigger: 'blur'}],
                port: [{required: true, message: '端口号不能为空', trigger: 'blur'}],
            }
        },
        created() {
            alert("创建时弹出")
        },
        methods: {
            test() {
                axios({
                    method: 'get',
                    url: 'http://' + this.form.host
                }).then(function (res) {
                    if (res.status === 200) {
                        alert("测试连接成功")
                    }

                }).catch(function (err) {
                    console.log(err);
                    alert("连接后台失败，请重试")
                });
            },
            submit() {
                axios({
                    method: "get",
                    url: 'http://' + this.form.host + '/connect',
                    params: {
                        ip: this.form.ip,
                        port: this.form.port
                    }
                }).then(res => {
                    console.log(res)
                })
            },
            scanSubmit() {
                if (this.from.port) {
                    axios({
                        method: "get",
                        url: 'http://' + this.form.host + '/scan/connect',
                        params: {
                            port: this.form.port
                        }
                    }).then(res => {
                        console.log(res)
                    })
                } else {
                    alert("请确保输入正确的端口号")
                }
            },
            reset() {
                this.$refs.form.resetFields();
            }
        }
    });
    axios.defaults.timeout = vm.timeout;

</script>
</body>
</html>
